<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .pic {
        box-sizing: border-box;
        width: 81px;
        height: 76px;
        background-image: url(https://oss.9ihub.com/test/20231010113053.png);
        background-repeat: no-repeat;
        
    }
    .box{
        width: 150px;
        height: 76px;
        position: relative;
    }

    .text {
        width: 69px;
        height: 24px;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: calc(-24px/2);
        
    }

    .top01 {
        background-position: 0px 0px;
        
    }

    .top02 {
        background-position: -81px 0px;
    }

    .top03 {
        background-position: 0px -76px;
    }

    .botten01 {
        background-position: -81px -76px;
    }

    .botten02 {

        background-position: calc(-81px*2) 0px;
    }

    .botten03 {
        background-position: calc(-81px*2) -76px;
    }
</style>

<body>
    <div>
        <div class="box">
            <div class="pic top01"></div>
            <div class="text">付款图标</div>
        </div>
        <div class="box">
            <div class="pic top02"></div>
            <div class="text">存款图标</div>
        </div>
        <div class="box">
            <div class="pic top03"></div>
            <div class="text">删除图标</div>
        </div>
        <div class="box">
            <div class="pic botten01"></div>
            <div class="text">粘贴图标</div>
        </div>
        <div class="box">
            <div class="pic botten02"></div>
            <div class="text">笑脸图标</div>
        </div>
        <div class="box">
            <div class="pic botten03"></div>
            <div class="text">编辑图标</div>
        </div>
    </div>
</body>

</html>